<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类</title>
    <!-- 引入外部css文件 -->
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/category.css">
</head>
<body>
    <!-- 搜索框 -->
    <div id="searchBox">
        <span class="iconfont icon-arrow-left back">
        </span>
        <div class="searchBar">
            <img src="images/search.png" alt="">
            <input type="search" placeholder="家用电器">
        </div>
    </div>

    <!-- 内容主体部分 -->
    <main id="main">
        <!-- 左侧分页栏 -->
        <ul id="tabs">
            <li><a href="javascript:void(0);" class="active">热门推荐</a></li>
            <li><a href="javascript:void(0);">手机数码</a></li>
            <li><a href="javascript:void(0);">家用电器</a></li>
            <li><a href="javascript:void(0);">电脑办公</a></li>
            <li><a href="javascript:void(0);">计生情趣</a></li>
            <li><a href="javascript:void(0);">美妆护肤</a></li>
            <li><a href="javascript:void(0);">个护清洁</a></li>
            <li><a href="javascript:void(0);">汽车生活</a></li>
            <li><a href="javascript:void(0);">乐购超市</a></li>
            <li><a href="javascript:void(0);">运动户外</a></li>
            <li><a href="javascript:void(0);">图书音像</a></li>
            <li><a href="javascript:void(0);">酒水饮料</a></li>
        </ul>
        <!-- 右侧分页栏 -->
        <ul id="con">
            <li> 
                <h3>热门推荐</h3>
                <ul>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img01.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img02.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img03.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img04.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img05.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img06.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img07.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img08.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img09.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                </ul> 
            </li>
            <li> 
                <h3>手机数码</h3>
                <ul>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img01.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img02.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img03.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img04.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img05.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img06.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img07.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img08.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img09.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                </ul> 
            </li>
            <li> 
                <h3>家用电器</h3>
                <ul>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img01.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img02.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img03.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img04.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img05.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img06.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img07.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img08.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img09.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                </ul> 
            </li>
            <li> 
                <h3>电脑办公</h3>
                <ul>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img01.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img02.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img03.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img04.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img05.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img06.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img07.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img08.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img09.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                </ul> 
            </li>
            <li> 
                <h3>计生情趣</h3>
                <ul>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img01.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img02.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img03.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img04.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img05.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img06.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img07.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img08.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img09.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                </ul> 
            </li>
            <li> 
                <h3>美妆护肤</h3>
                <ul>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img01.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img02.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img03.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img04.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img05.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img06.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img07.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img08.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img09.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                </ul> 
            </li>
            <li> 
                <h3>个护清洁</h3>
                <ul>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img01.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img02.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img03.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img04.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img05.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img06.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img07.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img08.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img09.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                </ul> 
            </li>
            <li> 
                <h3>汽车生活</h3>
                <ul>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img01.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img02.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img03.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img04.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img05.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img06.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img07.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img08.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img09.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                </ul> 
            </li>
            <li> 
                <h3>乐购超市</h3>
                <ul>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img01.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img02.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img03.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img04.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img05.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img06.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img07.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img08.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img09.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                </ul> 
            </li>
            <li> 
                <h3>运动户外</h3>
                <ul>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img01.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img02.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img03.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img04.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img05.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img06.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img07.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img08.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img09.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                </ul> 
            </li>
            <li> 
                <h3>图书音像</h3>
                <ul>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img01.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img02.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img03.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img04.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img05.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img06.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img07.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img08.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img09.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                </ul> 
            </li>
            <li> 
                <h3>酒水饮料</h3>
                <ul>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img01.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img02.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img03.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img04.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img05.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img06.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img07.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img08.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0);">
                            <img src="./images/cagegory-img09.png" alt="">
                            <p>手机</p>
                        </a>
                    </li>
                </ul> 
            </li>
        </ul>
    </main>

    <!-- 尾部 -->
    <footer id="footer">
        <ul>
            <li>
                <a href="index.html">
                    <span class="iconfont icon-ziyuan"></span>
                    <p>首页</p>
                </a>
            </li>
            <li>
                <a href="category.html" class="active">
                    <span class="iconfont icon-fenlei"></span>
                    <p>分类</p>
                </a>
            </li>
            <li>
                <a href="shopCart.html">
                    <span class="iconfont icon-gouwuche"></span>
                    <p>购物车</p>
                </a>
            </li>
            <li>
                <a href="my.html">
                    <span class="iconfont icon-wode"></span>
                    <p>我的</p>
                </a>
            </li>
        </ul>
    </footer>
    <!-- 引入js文件 -->
    <script src="./lib/jquery/jquery.js"></script>
    <script src="./js/category.js"></script>
</body>
</html>